<template>
  <div id="personalData">
    <!-- 内容选择器 -->
    <div class='mc' v-show='isDate' @click.stop='isDate=false'>
      <div class='duration' @click.stop='isDate=true'>
        <div class='top'>
          <a @click.stop='isDate=false'>取消</a>
          <a @click.stop='sure'>确定</a>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </div>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>个人基本资料填写</div>
    </header>

    <div class="border-8"></div>
    <ul class="registor">
      <li>
        <a>
          姓名:
          <input type="text" v-model="personalData.name" placeholder="请输入真实姓名" required/>
        </a>
      </li>
      <li>
        <a>
          性别:
          <input type="text" placeholder="请选择性别" @click='showPicker(0)' onfocus="this.blur();" v-model="personalData.sex">
        </a>
      </li>
      <li>
        <a>
          最高学历:
          <input type="text" v-model="personalData.highest_education" @click='showPicker(2)' placeholder="请选择最高学历"
            onfocus="this.blur();" />
        </a>
      </li>
      <li>
        <a>
          毕业院校:
          <input type="text" v-model="personalData.school" placeholder="请输入毕业院校" required/>
        </a>
      </li>
      <li>
        <a>
          从医履历:
          <!-- <textarea v-model="personalData.introduct" placeholder="请输入个人从医履历,如资料背书等，不超过200字" @focus='$utils.focus($event)'></textarea> -->
          <textarea v-model="personalData.introduct" placeholder="请输入个人从医履历,如资料背书等，不超过200字"></textarea>
        </a>
      </li>
      <li>
        <a>
          擅长专业:
          <span @click='showPicker(1)' style="padding-left: 10px;">{{content}}</span>
          <input v-if='content=="修复治疗 "' type="text" required disabled />
          <input v-if='content=="正畸治疗"' type="text" required disabled />
          <input v-if='content=="口外治疗 "' type="text" required disabled />
          <input v-if='content=="口内治疗"' type="text" required disabled />
          <input v-if='content=="种植治疗"' type="text" disabled />
        </a>
      </li>
      <li>
        <a>
          <i>是否同意患者预约</i>
          <i class="switch" :class="personalData.ishide_ordernum==0?'close':'open'" @click="changeSwitchA()"></i>
        </a>
      </li>
      <li>
        <a class="uploadImg">
          <div class="img">
            <el-upload :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false" :on-success="(res,file)=>{
                                      return handleAvatarSuccess(res,file,1)
                                    }"
              :before-upload="beforeAvatarUpload">
              <img class="selectImg" :src="singleUrl" width="50" height="50">
            </el-upload>
          </div>
          <div>
            <el-upload :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false" :on-success="(res,file)=>{
                                      return handleAvatarSuccess(res,file,1)
                                    }"
              :before-upload="beforeAvatarUpload">
              <img v-if="!singleUrl" :src="singleUrl">
              <b v-else style="font-weight: normal;">请上传面部照片用于启动牙科治疗椅</b>
            </el-upload>
          </div>

        </a>
      </li>
      <li>
        <el-upload :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false" :on-success="(res,file)=>{
                return handleAvatarSuccess(res,file,1)
              }"
          :before-upload="beforeAvatarUpload">
          <img src="../../../image/person.jpg" alt="" style="width: 100%;">
        </el-upload>
      </li>
    </ul>
    <a class="confirmBtn" @click="save">
      保 存
    </a>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        singleUrl: require('../../../image/bg_pic.png'), //个人照片
        userid: '',
        kind: '', //种类
        status: 'add', //add edit
        persos: 'add', //add edit
        personalData: {
          id: localStorage.getItem("loginMobile"),
          name: '',
          sex: '',
          birthdate: '',
          highest_education: '', //最高学历
          school: '',
          area: '', //工作单位
          plant_price: '',
          repair_price: '',
          profess: '修复治疗',
          isshow: 0, //是否隐藏个人信息
          ishide_ordernum: 0, //是否隐藏下单率
        },
        content: '修复治疗 ',
        isDate: false, //是否显示选择器
        values: '', //选择但未确定时的选项
        slots: [{
          values: ['修复治疗', '正畸治疗', '口外治疗 ', '口内治疗', '种植治疗'],
          className: 'slot1',
          textAlign: 'center',
          defaultIndex: 0,
          value: '种植价',
        }, ],
        isTime: false, //是否显示时间选择器
      }
    },
    components: {

    },
    methods: {
      //上传个人照片
      handleAvatarSuccess(res, file, i) {
        if (res.state == 200) {
          this.singleUrl = res.result_origin;
        }
      },
      beforeAvatarUpload(file) {
        if (!/image\/\w+/.test(file.type)) {
          this.$utils._toast('请确保文件为图像类型');
          return false;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$utils._toast('上传图片不能超过5M');
          return false;
        }
      },
      // 显示椅子 手术类型选择器
      showPicker(str) { //0指性别 1指专业  2指学历
        this.isDate = true;
        this.kind = str;
        if (str == 0) {
          this.slots = [{
            values: ['男', '女'],
            className: 'slot1',
            textAlign: 'center'
          }, ]
        } else if (str == 1) {
          this.slots = [{
            values: ['修复治疗', '正畸治疗', '口外治疗 ', '口内治疗', '种植治疗'],
            className: 'slot1',
            textAlign: 'center'
          }, ]
        } else if (str == 2) {
          this.slots = [{
            values: ['大专', '本科', '硕士', '博士'],
            className: 'slot1',
            textAlign: 'center'
          }, ]
        } else {
          this.slots = [{
              flex: 1,
              values: function () {
                const date = new Date();
                const year = date.getFullYear();
                const yearArr = [];
                for (var i = year; i > 0; i--) {
                  yearArr.push(i);
                }
                return yearArr;
              }(),
              className: 'slot1',
              textAlign: 'center'
            },
            {
              flex: 1,
              values: function () {
                const monthArr = [];
                for (var i = 1; i < 13; i++) {
                  if (i < 10) {
                    monthArr.push('0' + i);
                  } else {
                    monthArr.push(i);
                  }
                }
                return monthArr;
              }(),
              className: 'slot2',
              textAlign: 'center'
            },
            {
              flex: 1,
              values: function () {
                const dayArr = [];
                for (var i = 1; i < 32; i++) {
                  if (i < 10) {
                    dayArr.push('0' + i);
                  } else {
                    dayArr.push(i);
                  }
                }
                return dayArr;
              }(),
              className: 'slot3',
              textAlign: 'center'
            },
          ]
        }
      },

      changeSwitchA() {
        if (this.personalData.ishide_ordernum == 1) {
          this.$set(this.personalData, 'ishide_ordernum', 0);
        } else {
          this.$set(this.personalData, 'ishide_ordernum', 1);
        }
      },
      //个人信息
      change() {
        if (this.personalData.isshow == 1) {
          this.$set(this.personalData, 'isshow', 0);
        } else {
          this.$set(this.personalData, 'isshow', 1);
        }
      },
      //出生年月日
      onValuesChange(picker, values) {
        this.values = values[0];
        this.valuestime = values[0] + '-' + values[1] + '-' + values[2];

        function mGetDate(year, month) {
          var d = new Date(year, month, 0);
          return d.getDate();
        }
        var totalDay = mGetDate(values[0], values[1]); //29 
        const dayArr = [];
        for (var i = 1; i < totalDay + 1; i++) {
          if (i < 10) {
            dayArr.push('0' + i);
          } else {
            dayArr.push(i);
          }
        }
        picker.setSlotValues(2, dayArr)
      },

      sure() {
        if (this.kind == 0) {
          this.personalData.sex = this.values
        } else if (this.kind == 1) {
          this.content = this.values;
        } else if (this.kind == 2) {
          this.personalData.highest_education = this.values;
        } else {
          this.personalData.birthdate = this.valuestime;
        }
        this.isDate = false;
      },
      // 判断是首次填写还是编辑
      isCommit() {
        this.userid = localStorage.getItem("loginMobile");
        this.$api.get(this.$api.baseURLSchool, "select_cid/doctor/" + this.userid, {}, r => {

          if (r.data.ret == 0) {
            this.status = 'add';
          } else if (r.data.ret == 1) {
            this.status = 'edit';
            this.personalData = r.data.info;

            if (r.data.info.profess) {
              this.content = r.data.info.profess;
            }
            if (r.data.info.profess1) {
              this.content = r.data.info.profess1;
            }
            if (r.data.info.profess2) {
              this.content = r.data.info.profess2;
            }
            if (r.data.info.profess3) {
              this.content = r.data.info.profess3;
            }
            if (r.data.info.profess4) {
              this.content = r.data.info.profess4;
            }
          }
        }, err => {
          console.log(err);
        })
      },
      goBack() {
        this.$router.back();
      },
      save() {
        this.personalData.singleUrl = this.singleUrl
        if (this.content == '修复治疗') {
          this.personalData.profess = this.content;
          this.personalData.profess1 = this.personalData.profess2 =
            this.personalData.profess3 = this.personalData.profess4 = ''
        }
        if (this.content == '正畸治疗') {
          this.personalData.profess1 = this.content;
          this.personalData.profess = this.personalData.profess2 =
            this.personalData.profess3 = this.personalData.profess4 = ''
        }
        if (this.content == '口外治疗') {
          this.personalData.profess2 = this.content;
          this.personalData.profess1 = this.personalData.profess =
            this.personalData.profess3 = this.personalData.profess4 = ''
        }
        if (this.content == '口内治疗') {
          this.personalData.profess3 = this.content;
          this.personalData.profess1 = this.personalData.profess2 =
            this.personalData.profess = this.personalData.profess4 = ''
        }
        if (this.content == '种植治疗') {
          this.personalData.profess4 = this.content;
          this.personalData.profess1 = this.personalData.profess2 =
            this.personalData.profess3 = this.personalData.profess = ''
        }
        if (!this.personalData.name) {
          this.$utils._toast("请输入真实姓名");
          return false;
        }
        if (!this.personalData.sex) {
          this.$utils._toast("请输入性别");
          return false;
        }
        if (!this.personalData.highest_education) {
          this.$utils._toast("请输入最高学历");
          return false;
        }
        if (!this.personalData.school) {
          this.$utils._toast("请输入毕业院校");
          return false;
        }
        if (1 > this.personalData.introduct.length || this.personalData.introduct.length > 200) {
          this.$utils._toast("从医履历不能为空且不得超过200字");
          return false;
        }
        this.$api.post(this.$api.baseURLSchool, "updatedata/doctor/" + this.status, this.personalData, r => {
          if (r.data.ret == 1) {
            this.$utils._toast("保存成功");
            setTimeout(() => {
              this.goBack();
            }, 300);
          }
        }, err => {
          console.log(err);
        })
      },
    },
    created() {
      this.isCommit();
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  #personalData ul.registor li>a {
    padding: 12.5px 0px;
  }


  .uploadImg {
    justify-content: space-between;
    align-items: center;
  }

</style>
